<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据访问页面</title>
    <script src="static/js/tailwindcss.3.4.17.js"></script>
    <link rel="stylesheet" href="static/css/all.min.css">
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center">
    <div class="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-md">
        <div class="text-center mb-8">
            <i class="fas fa-database text-6xl text-blue-500 mb-4"></i>
            <h1 class="text-3xl font-bold text-gray-800">数据访问系统</h1>
            <p class="text-gray-600 mt-2">请输入访问码获取数据信息</p>
        </div>
        
        <div class="space-y-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">访问码</label>
                <input type="password" id="accessCode" 
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                    placeholder="请输入0000">
            </div>
            
            <button id="confirmBtn" 
                class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-4 rounded-lg transition-all transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                <i class="fas fa-check mr-2"></i>确认访问
            </button>
            
            <div id="errorMessage" class="hidden bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg text-sm">
                <i class="fas fa-exclamation-triangle mr-2"></i>
                <span id="errorText">访问码错误，请重新输入</span>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('confirmBtn').addEventListener('click', function() {
            const accessCode = document.getElementById('accessCode').value;
            const errorDiv = document.getElementById('errorMessage');
            
            if (accessCode === '0000') {
                errorDiv.classList.add('hidden');
                
                // 模拟服务器请求
                fetch('/get_question_id')
                    .then(response => response.json())
                    .then(data => {
                        // 将数据存储在sessionStorage中以便页面B使用
                        sessionStorage.setItem('questionData', JSON.stringify(data));
                        sessionStorage.setItem('currentIndex', '0');
                        
                        // 跳转到页面B，携带参数
                        window.location.href = `page_b.html?index=0&data=${encodeURIComponent(JSON.stringify(data))}`;
                    })
                    .catch(error => {
                        console.error('获取数据失败:', error);
                        document.getElementById('errorText').textContent = '网络请求失败，请重试';
                        errorDiv.classList.remove('hidden');
                    });
            } else {
                document.getElementById('errorText').textContent = '访问码错误，请输入0000';
                errorDiv.classList.remove('hidden');
            }
        });

        // 回车键支持
        document.getElementById('accessCode').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('confirmBtn').click();
            }
        });
    </script>
</body>
</html>
